import React, { useEffect, useRef, useState } from "react"
import { PlusOutlined } from "@ant-design/icons"
import type { InputRef } from "antd"
import { Flex, Input, Tag, theme, Tooltip } from "antd"

const tagInputStyle: React.CSSProperties = {
  width: 64,
  height: 22,
  marginInlineEnd: 8,
  verticalAlign: "top",
}

const TagInput = ({
  value,
  onChange,
  disabled,
  color,
  buttonText = "添加标签",
}: {
  value?: string[]
  onChange?: (value?: string[]) => void
  disabled?: boolean
  color?: string
  buttonText?: string | null
}) => {
  const { token } = theme.useToken()
  const [tags, setTags] = useState<string[]>()
  const [inputVisible, setInputVisible] = useState(false)
  const [inputValue, setInputValue] = useState("")
  const [editInputIndex, setEditInputIndex] = useState(-1)
  const [editInputValue, setEditInputValue] = useState("")
  const inputRef = useRef<InputRef>(null)
  const editInputRef = useRef<InputRef>(null)

  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus()
    }
  }, [inputVisible])

  useEffect(() => {
    console.log("value", value)
    setTags(value)
  }, [value])

  useEffect(() => {
    editInputRef.current?.focus()
  }, [editInputValue])

  const handleClose = (removedTag: string) => {
    const newTags = tags?.filter((tag) => tag !== removedTag)
    console.log(newTags)
    onChange?.(newTags)
  }

  const showInput = () => {
    setInputVisible(true)
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }

  const handleInputConfirm = () => {
    if (inputValue && !tags?.includes(inputValue)) {
      onChange?.([...(tags ?? []), inputValue])
    }
    setInputVisible(false)
    setInputValue("")
  }

  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEditInputValue(e.target.value)
  }

  const handleEditInputConfirm = () => {
    const newTags = [...(tags ?? [])]
    newTags[editInputIndex] = editInputValue
    onChange?.(newTags)
    setEditInputIndex(-1)
    setEditInputValue("")
  }

  const tagPlusStyle: React.CSSProperties = {
    height: 22,
    background: token.colorBgContainer,
    borderStyle: "dashed",
  }

  return (
    <Flex gap="4px 0" wrap>
      {tags?.map?.((tag, index) => {
        if (editInputIndex === index) {
          return (
            <Input
              ref={editInputRef}
              key={tag}
              size="small"
              style={tagInputStyle}
              value={editInputValue}
              onChange={handleEditInputChange}
              onBlur={handleEditInputConfirm}
              onPressEnter={handleEditInputConfirm}
            />
          )
        }
        const isLongTag = tag.length > 20
        const tagElem = (
          <Tag
            key={tag}
            closable
            style={{ userSelect: "none" }}
            color={color ?? "success"}
            onClose={() => handleClose(tag)}
          >
            <span
              onDoubleClick={(e) => {
                //if (index !== 0) {
                if (disabled) return
                setEditInputIndex(index)
                setEditInputValue(tag)
                e.preventDefault()
                // }
              }}
            >
              {isLongTag ? `${tag.slice(0, 20)}...` : tag}
            </span>
          </Tag>
        )
        return isLongTag ? (
          <Tooltip title={tag} key={tag}>
            {tagElem}
          </Tooltip>
        ) : (
          tagElem
        )
      })}
      {!disabled ? (
        inputVisible ? (
          <Input
            ref={inputRef}
            type="text"
            size="small"
            style={tagInputStyle}
            value={inputValue}
            onChange={handleInputChange}
            onBlur={handleInputConfirm}
            onPressEnter={handleInputConfirm}
          />
        ) : (
          <Tag style={tagPlusStyle} icon={<PlusOutlined />} onClick={showInput}>
            {buttonText}
          </Tag>
        )
      ) : null}
    </Flex>
  )
}

export default TagInput
